<template>
  <div class="box80">
    <div class="html">
      <ul class="wid100 index1">
        <li>
            <router-link :to="{ path: '/selectLampListAll' }">
              <div class="img_2_conts">
                  <img src="@/assets/images/brjg.jpg" alt="" class="img_2_img">  
                  <p class="font16">全部...</p>
              </div>
            
            </router-link>
        </li>
        <li v-for="(item, index) in tableData" :key="index">
          <router-link :to="{ path: '/selectLampList',query:{id:item.id} }">
            <div class="imgssw">
                  <!-- <div :style="{backgroundImage:'url('+ImgPath +  item.sketchMap + ')'}"></div> -->
                  <img :src=" ImgPath + item.sketchMap " alt="" class="img_2_img">  
                  <img src="@/assets/images/icon_12.png" class="img3" alt>
            </div>
            <p class="font16">{{item.contestDescribe}}</p>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "lampIndex",
  data() {
    return {
      tableData: []
    };
  },
  created() {
    let self = this
    this.$http.get('/api/contests/contestTypeList',{},function(res){
			if(res.success){
				self.tableData = res.data
			}
			console.log(res)
		})
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/scss" lang="scss" scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
a {
  color: #42b983;
}
.index1 li {
  padding: 10px;
  width: 20%;
  float: left;
  .img_2_conts{
     background: rgba(214,208,214,0.8);
      
            .img_2_img{
              opacity: 0;
            }
            .font16{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate3d(-50%,-25%,0);
              color: #555555;
              z-index: 999999;
              display: block;
              font-size: 20px;
              height: auto;
              padding: 0;
              line-height: normal;
            }
            &:hover{
                  background-color: rgba(91, 100, 163, 0.9);
                  .font16{
                    color: #fff;
                  }
            }
  
  }
}
.index1 li a {
  height: 100%;
  position: relative;
}
.index1 li .imgssw {
  border-radius: 4px;
  position: relative;
  &::before{
    content: '';
    width: 100%;
    height: 100%;
    background-color: rgba(91, 100, 163, 0.9);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
  }
  .img3{
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    z-index: 9;
    display: none;
  }

}
.index1 li .imgssw div {
  background-repeat: no-repeat;
  background-size: cover;
}
.index1 li .imgssw img{
  display: block;
}
.index1 li p {
  color: #fff;
  padding:2px 15px;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 9;
  text-align: center;
  padding-bottom: 12px;
}
.index1 li:last-child .li_last {
  height: 247px;
  background-color: #eeeeee;
  border-radius: 4px;
  text-align: center;
  color: #999999;
}

@media (max-width: 1200px){
  .index1 li{
    width: 25%;
  }
 
}
@media (max-width: 992px){
  .index1 li{
    width: 33.3333%;
  }
}
@media (max-width: 767px){
  .index1 li{
    width: 33.3333%;
  }
  .index1 li .imgssw{
    height: 170px;
  }
}
@media (max-width: 500px){
  .index1 li{
    width: 50%;
  }
  .index1 li .imgssw{
    height: 160px;
  }
}
</style>
